<!-- 设备维修记录 -->
<template>
  <div class="repair-record">
    <TableTurn :table-data="getData" :args="args" ref="tableRef">
      <a-table-column :width="80" align="center">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>

      <a-table-column
        :width="150"
        align="center"
        title="维修单号"
        data-index="number"
      >
      </a-table-column>

      <a-table-column
        :width="150"
        align="center"
        title="设备名称"
        data-index="equipName"
      >
      </a-table-column>
      <a-table-column
        :width="150"
        align="center"
        title="设备编码"
        data-index="equipNumber"
      >
      </a-table-column>
      <!-- <a-table-column :width="150" align="center" title="故障描述">
          <template #cell="{ record }">
            <a-button type="text" @click="goDetail(record, 2)">查看</a-button>
          </template>
        </a-table-column> -->

      <a-table-column
        :width="150"
        align="center"
        title="报修人"
        data-index="reporterName"
      >
      </a-table-column>
      <a-table-column :width="200" align="center" title="报修时间">
        <template #cell="{ record }">
          {{ `${dayjs(record.reporterTime).format('YYYY-MM-DD HH:mm:ss')}` }}
        </template>
      </a-table-column>

      <a-table-column
        :width="150"
        align="center"
        title="维修人"
        data-index="repairerName"
      >
      </a-table-column>
      <a-table-column :width="200" align="center" title="维修开始时间">
        <template #cell="{ record }">
          {{
            record.repairBeginTime === 0
              ? '-'
              : `${dayjs(record.repairBeginTime).format('YYYY-MM-DD HH:mm:ss')}`
          }}
        </template>
      </a-table-column>

      <a-table-column :width="200" align="center" title="维修结束时间">
        <template #cell="{ record }">
          {{
            record.repairEndTime === 0
              ? '-'
              : `${dayjs(record.repairEndTime).format('YYYY-MM-DD HH:mm:ss')}`
          }}
        </template>
      </a-table-column>
      <!-- <a-table-column :width="150" align="center" title="故障分析及处理">
          <template #cell="{ record }">
            <a-button type="text" @click="goDetail(record, 4)">查看</a-button>
          </template>
        </a-table-column> -->
      <a-table-column
        :width="150"
        align="center"
        title="维修状态"
        fixed="right"
      >
        <template #cell="{ record }">
          <div class="repair-state">
            <div
              class="cycle"
              :class="
                record.repairState === 1
                  ? 'waitJob-cycle'
                  : record.repairState === 2
                  ? 'waitRepair-cycle'
                  : record.repairState === 3
                  ? 'running-cycle'
                  : record.repairState === 4
                  ? 'needOut-cycle'
                  : record.repairState === 5
                  ? 'outing-cycle'
                  : 'finish-cycle'
              "
            >
            </div>
            <div
              :class="
                record.repairState === 1
                  ? 'waitJob'
                  : record.repairState === 2
                  ? 'waitRepair'
                  : record.repairState === 3
                  ? 'running'
                  : record.repairState === 4
                  ? 'needOut'
                  : record.repairState === 5
                  ? 'outing'
                  : 'finish'
              "
              >{{
                record.repairState === 1
                  ? '待派工'
                  : record.repairState === 2
                  ? '待维修'
                  : record.repairState === 3
                  ? '进行中'
                  : record.repairState === 4
                  ? '需委外'
                  : record.repairState === 5
                  ? '已委外'
                  : '已完工'
              }}</div
            >
          </div>
        </template>
      </a-table-column>

      <!-- 操作item -->
      <!-- <a-table-column align="center" :width="300" fixed="right" title="操作">
        <template #cell="{ record }">
          <a-button type="text" @click="goDetail(record, 5)">维修详情</a-button>
          <a-popconfirm
            @ok="deleteItem(record.id)"
            content="确定删除吗"
            type="error"
          >
            <a-button
              type="text"
              :style="{
                color: 'red'
              }"
              >删除</a-button
            >
          </a-popconfirm>
        </template>
      </a-table-column> -->
    </TableTurn>
    <equipmentRepair
      :type="type"
      :form="form.list"
      v-model:visible="repairVisible"
    ></equipmentRepair>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, computed } from 'vue';
  import dayjs from 'dayjs';
  import { useRoute } from 'vue-router';
  import { GetFaultEquipmentList } from '@/api/equipment-management/equipment-maintain-manager';

  import equipmentRepair from '../../../../components/equipment-repair/index.vue';

  const route = useRoute();
  const id = Number(route.query.id); // 设备id
  // 表格配置
  const args = reactive({
    stripe: true,
    bordered: {
      headerCell: true
    }
  });

  let tableRef = ref(); // 储存table的ref
  // 储存某行的信息
  const form = reactive({
    list: {}
  });

  let type = ref(1); // 判断弹出框的type
  let repairVisible = ref(false); // 判断故障报修弹出框是否弹出

  // 获取表格数据
  const getData = async (pageData?: any) => {
    try {
      const res = await GetFaultEquipmentList({
        equipmentId: id,
        page: 1,
        size: -1
      });
      return Promise.resolve(res);
    } catch (error: unknown) {
      console.log(error);
    }
  };

  // 表格故障描述中的的查看按钮
  const goDetail = (record: any, currType: number) => {
    type.value = currType;
    form.list = record;
    repairVisible.value = true;
  };

  // 删除一项
  // const deleteItem = async (id: number) => {
  //   try {
  //     await DelFaultEquipment({
  //       id,
  //       authority: 1
  //     });
  //     tableRef.value.loadData();
  //   } catch (error: unknown) {
  //     console.log(error);
  //   }
  // };
</script>

<style scoped lang="less">
  .repair-record {
    .repair-state {
      display: flex;
      justify-content: center;
      text-align: center;
      .cycle {
        position: relative;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        content: '';
        display: inline-block;
        top: 3px;
        right: 10px;
      }
    }

    // 待派工
    .waitJob {
      color: #ccc;
    }
    .waitJob-cycle {
      background-color: #ccc;
    }

    // 维修中
    .waitRepair {
      color: #ccc;
    }
    .waitRepair-cycle {
      background-color: #ccc;
    }
    // 进行中
    .running {
      color: #3d7eff;
    }
    .running-cycle {
      background-color: #3d7eff;
    }
    // 需委外
    .needOut {
      color: #f90;
    }
    .needOut-cycle {
      background-color: #f90;
    }
    // 已委外
    .outing {
      color: #3cf;
    }
    .outing-cycle {
      background-color: #3cf;
    }
    // 已完工
    .finish {
      color: #31c27c;
    }
    .finish-cycle {
      background-color: #31c27c;
    }
  }
</style>
